<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>平台设置</title>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"
    />
    <script src="../../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/pingtai.css" />
    <link rel="stylesheet" href="../../src/font/字体图标/iconfont.css" />
    <script src="../../src/font/字体图标/iconfont.js"></script>
  </head>
  <body>
    <div class="h"></div>
    <div class="bj-box">
      <div class="modal-bj">
        <div class="guanbi">
          <span>编辑平台设置</span><span class="iconfont icon-guanbi"></span>
        </div>
        <label>
          <span>配置key:</span
          ><input type="text" value="recipe_expried" disabled />
        </label>
        <label
          ><span>值:</span> <input type="number" id="shu" value="" />
        </label>
        <label>
          <span>描述:</span><input type="text" id="miaoshu" value="" disabled />
        </label>

        <button id="qx">取消</button>
        <button id="qd">保存</button>
      </div>
    </div>
    <div class="container-fluid">
      <div class="content">
        <div class="myTable">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>描述</th>
                <th>值</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div id="pageDiv">
          <div id="allPage"></div>
          <select>
            <option value="1">10条/页</option>
          </select>
          <span id="pre"> < </span>

          <span class="page">1</span>

          <span id="next"> > </span>
          <div id="tiaozhuan">
            <span>前往</span>
            <input type="text" id="tiaopage" />
            <span>页</span>
            <button id="tiao">跳转</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let arr = [
      { id: 1, miao: "图文问诊接诊后聊天时长/s", zhi: "172800" },
      { id: 2, miao: "视频问诊接诊后聊天时长/s", zhi: "172800" },
      { id: 3, miao: "药品订单抽成比例/%", zhi: "1" },
      { id: 4, miao: "图文问诊订单抽成比例/%", zhi: "1" },
      { id: 5, miao: "视频问诊订单抽成比例/%", zhi: "1" },
      { id: 6, miao: "无人接诊退款配置/s", zhi: "86400" },
      {
        id: 7,
        miao: "七牛云储存配置",
        zhi: "{“accesskey”:“sdbhsabd_dshjf-dsf”,“sdhbfhs_sadfa-dsad”,“dsfsdkf_ndsjknf-sad_sad”******}",
      },
      { id: 8, miao: "微信支付配置", zhi: "*************************" },
      { id: 9, miao: "支付宝支付配置", zhi: "*************************" },
      {
        id: 10,
        miao: "小程序设置",
        zhi: "{“appid”:“sdbhsabd_dshjf-dsf”,“sdhbfhs_sadfa-dsad”,“dsfsdkf_ndsjknf-sad_sad”}",
      },
      { id: 11, miao: "图文问诊接诊后聊天时长/s", zhi: "172800" },
      { id: 12, miao: "视频问诊接诊后聊天时长/s", zhi: "172800" },
      { id: 13, miao: "药品订单抽成比例/%", zhi: "1" },
      { id: 14, miao: "图文问诊订单抽成比例/%", zhi: "1" },
      { id: 15, miao: "视频问诊订单抽成比例/%", zhi: "1" },
      { id: 16, miao: "无人接诊退款配置/s", zhi: "86400" },
      {
        id: 17,
        miao: "七牛云储存配置",
        zhi: "{“accesskey”:“sdbhsabd_dshjf-dsf”,“sdhbfhs_sadfa-dsad”,“dsfsdkf_ndsjknf-sad_sad”******}",
      },
      { id: 18, miao: "微信支付配置", zhi: "*************************" },
      { id: 19, miao: "支付宝支付配置", zhi: "*************************" },
      {
        id: 20,
        miao: "小程序设置",
        zhi: "{“appid”:“sdbhsabd_dshjf-dsf”,“sdhbfhs_sadfa-dsad”,“dsfsdkf_ndsjknf-sad_sad”}",
      },
    ];
    let maxPage;
    let dangqianyeData = [];
    let dangqianyePage = 1;
    let bjId;
    let ms;
    let sz;

    showPage(arr);
    showData(arr, dangqianyePage);

    // 将数据渲染到tbody
    function show(data) {
      $("tbody").html("");
      for (let i = 0; i < data.length; i++) {
        $("tbody").append(`
            <tr>
                <td>${data[i].id}</td>
                <td>${data[i].miao}</td>
                <td>${data[i].zhi}</td>
                <td>
                <button data-id='${data[i].id}' class='bj'>编辑</button>
                </td>
            </tr>
        `);
      }
    }

    // 渲染页码到page里
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10);
      $("#allPage").text(`共${data.length}条`);
      $(".page").html("");
      for (let i = 1; i <= maxPage; i++) {
        $(".page").append(`<span class='addPage'>${i}</span>`);
      }
    }
    // 截取数据 根据页码截取相应数据 并将数据渲染到tbody 以及页码样式
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10;
      dangqianyeData = data.slice(qishi, qishi + 10);
      show(dangqianyeData);

      $(".addPage")
        .eq(pageNum - 1)
        .addClass("active4")
        .siblings()
        .removeClass("active4");
      dangqianyePage = pageNum;
    }
    // 点击页码 渲染页码对应的相应数据到tbody
    $(".page").on("click", ".addPage", function () {
      let pageNum = $(this).text();
      showData(arr, pageNum);
    });
    // 点击上一页按钮 当前页的上一页数据渲染 以及页码
    $("#pre").click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1;
        showData(arr, shangyiye);
      }
    });
    // 下一页
    $("#next").click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1;
        showData(arr, xiayiye);
      }
    });
    // 在跳转页面里输入数字 点击跳转按钮 跳转到数字对应的页码
    $("#tiao").click(function () {
      let pageNum = $("#tiaopage").val();
      for (let i = 1; i <= maxPage; i++) {
        if (pageNum == i) {
          dangqianyePage = pageNum;
        }
      }
      showData(arr, dangqianyePage);
    });
    // 点击编辑按钮 弹出模态框
    $("tbody").on("click", ".bj", function () {
      $(".modal-bj").css({ top: "20%" });
      $(".h").css({ display: "block" });
      bjId = $(this).attr("data-id");

      // 模态框里的描述内容
      for (let i = 0; i < arr.length; i++) {
        if (bjId == arr[i].id) {
          ms = arr[i].miao;
          sz = arr[i].zhi;
          // 判断模态框里的值是否为数字
          if (isNaN(arr[i].zhi)) {
            $("#shu").attr("type", "text");
          } else {
            $("#shu").attr("type", "number");
          }
        }
      }
      $("#miaoshu").val(ms);
      $("#shu").val(sz);
    });
    // 点击除模态框以外的位置 模态框消失
    $("body").click(function (e) {
      if ($(e.target).closest(".bj,.bj-box").length == 0) {
        $(".modal-bj").css({ top: "-600px" });
        $(".h").css({ display: "none" });
      }
    });

    // 点击取消按钮 以及点击头部关闭按钮
    $("#qx").click(function () {
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });
    $(".iconfont").click(function () {
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });

    // 点击保存按钮
    $("#qd").click(function () {
      let userZhi = $("#shu").val();
      for (let i = 0; i < arr.length; i++) {
        if (bjId == arr[i].id) {
          arr[i].zhi = userZhi;
        }
      }
      showData(arr, dangqianyePage);
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });
  </script>
</html>
